<template>
    <div>
        <input type="text" v-model="val">
        <h2>{{ val }}</h2>
        <h2>{{ a }}</h2>

        <button @click="fun">修改</button>

        <ul>
            <li v-for="item in arr" ::key="item">{{ item }}</li>
        </ul>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
    // 入口方法 + beforeCreate + created = setup
    setup () {
        const val = ref<string|number>("");
        
        // let a = 100;
        // let b = 200;
        // ref 方法 用来定义 响应式变量
        // 用来定义基本数据类型 的响应式 ------但是也能传入引用数据类型 ref方法会帮我们调用 reactive 方法 来实现
        const a = ref(100)//返回一个ref 对象
        const arr = ref([11,22,33])
        function fun(){
            // console.log(a.value);
            //a*2
            // a.value = 200;//这种写法 直接把ref 覆盖
            // console.log(a);
            arr.value[0] = 100;
            arr.value.push(400) 
            // a.value = a.value*2

        }

        // 想要在视图层 上使用变量或方法 必须return
        return {
            a,
            fun,
            val,
            arr

        }
    }
}
</script>

<style>

</style>